<template>
 <!-- <div id="certificateRank" style="width: 100%; height: 400px;"></div> -->
 <div ref="lineChart" style="width: 100%; height: 400px;"></div>

</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref, onMounted, getCurrentInstance, shallowRef } from "vue";
import { certificateRank } from "@/api/request/commendation/znlecharts";
import { isTypePredicateNode } from 'typescript';

type EChartsOption = echarts.EChartsOption;

var option: any;
const chartDom = ref<HTMLElement | null>(null);
// 这里不能用ref,否则提示框会不显示的
const myChart = shallowRef();
const lineChart = ref<any>(null);

onMounted(() => {

    // chartDom.value = document.getElementById("certificateRank")!;
    // myChart.value = echarts.init(chartDom.value as HTMLElement);
    myChart.value = echarts.init(lineChart.value);

    option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'center'
  },
  series: [
    {
      name: '证书数量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '特等奖' },
        { value: 735, name: '金奖' },
        { value: 580, name: '一等奖' },
        { value: 484, name: '银奖' },
        { value: 300, name: '二等奖' },
        { value: 300, name: '铜奖' },
        { value: 300, name: '三等奖' },
        { value: 300, name: '优秀奖' },
        { value: 300, name: '入围奖' },
        { value: 300, name: '优秀指导老师' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


option && myChart.value.setOption(option);
// certificateRankReq({});

})

const certificateRankReq = (query: object) => {
    certificateRank(query).then((response: any) => {
        option.series[0].data = response;
        myChart.value.setOption(option);
    })
}

defineExpose({
    certificateRankReq
})
</script>